<template>
    <div>
        <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
            <a-row>
                <a-col :span="1">
                    <div style="margin-top: 6px">V</div>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="" name="num1" class="version-number1-form-item">
                        <a-input v-model:value="form.num1" :min="1" :max="1000" style="width: 100%" v-if="systemInfo.catalogType === '2'" />
                        <a-input
                            :disabled="parentInfo.id > 0 && +versionInfo.type > 1"
                            v-model:value="form.num1"
                            :min="1"
                            :max="1000"
                            style="width: 100%"
                            v-else
                        />
                    </a-form-item>
                </a-col>
                <a-col :span="1">
                    <span style="margin: 0 8px">.</span>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="" name="num2">
                        <!-- 支线版本 -->
                        <a-input v-model:value="form.num2" disabled :min="1" :max="1000" style="width: 100%" v-if="+versionInfo.type === 1" />
                        <a-input v-model:value="form.num2" :min="1" :max="1000" style="width: 100%" v-else-if="systemInfo.catalogType === '2'" />
                        <a-input :disabled="parentInfo.id > 0 && +versionInfo.type > 2" v-model:value="form.num2" style="width: 100%" v-else />
                    </a-form-item>
                </a-col>
                <a-col :span="1">
                    <span style="margin: 0 8px">.</span>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="" name="num3">
                        <a-input v-model:value="form.num3" :disabled="+versionInfo.type < 3" style="width: 100%" />
                    </a-form-item>
                </a-col>
                <a-col :span="1" v-if="+versionInfo.type === 3">
                    <span style="margin: 0 8px">.</span>
                </a-col>
                <a-col :span="4" v-if="+versionInfo.type === 3">
                    <a-form-item label="" name="num4">
                        <a-input v-model:value="form.num4" style="width: 100%" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, unref, reactive, toRefs, watch, computed } from 'vue';
export default defineComponent({
    props: {
        parentInfo: {
            type: Object,
            default: () => ({})
        },
        versionInfo: {
            type: Object,
            default: () => ({})
        },
        systemInfo: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            form: {
                num1: null,
                num2: '',
                num3: '',
                num4: ''
            }
        });
        const versionNumber = computed(() => {
            if (!state.form.num2) {
                state.form.num2 = 0;
            }
            if (!state.form.num3) {
                state.form.num3 = 0;
            }
            if (!state.form.num4) {
                state.form.num4 = 0;
            }
            const { num1, num2, num3, num4 } = state.form;
            return +props.versionInfo.type === 3 ? `${num1}.${num2}.${num3}.${num4}` : `${num1}.${num2}.${num3}`;
        });
        const validateVersionNumber1 = async (rule: any, value: any) => {
            if (value) {
                const reg = /^[a-zA-Z0-9-]*$/gi;
                return reg.test(value) ? Promise.resolve() : Promise.reject('格式不正确');
            } else {
                return Promise.resolve();
            }
        };
        const validateVersionNumber = async (rule: any, value: any) => {
            if (value) {
                const reg = /^[a-zA-Z0-9]*$/gi;
                return reg.test(value) ? Promise.resolve() : Promise.reject('格式不正确');
            } else {
                return Promise.resolve();
            }
        };
        const rules = {
            num1: [
                {
                    required: true,
                    message: '不能为空',
                    trigger: 'change'
                },
                { validator: validateVersionNumber1, trigger: 'change' }
            ],
            num2: [{ validator: validateVersionNumber, trigger: 'change' }],
            num3: [{ validator: validateVersionNumber, trigger: 'change' }],
            num4: [{ validator: validateVersionNumber, trigger: 'change' }]
        };
        const validate = () => {
            return new Promise((res, rej) => {
                unref(ruleFormRef)
                    .validate()
                    .then(
                        () => {
                            res(true);
                        },
                        () => {
                            rej(false);
                        }
                    );
            });
        };
        watch(
            () => props.parentInfo,
            () => {
                const { type } = props.versionInfo;
                if (props.parentInfo.id > 0) {
                    // 支线版本
                    if (+type === 2) {
                        // 限制一位
                        const arr = props.parentInfo.versionNumber.split('.');
                        state.form.num1 = arr[0];
                    }
                    // 预发布版本
                    if (+type === 3) {
                        // 子产品的预发布版本号，不需要限制两位
                        if (props.systemInfo.catalogType !== '2') {
                            // 限制两位
                            const arr = props.parentInfo.versionNumber.split('.');
                            state.form.num1 = arr[0];
                            state.form.num2 = arr[1];
                        }
                    }
                }
            },
            { deep: true, immediate: true }
        );
        // 修改版本类型时，清空已经输入的版本号
        watch(
            () => props.versionInfo.type,
            () => {
                init();
            },
            { deep: true }
        );
        const init = () => {
            const { versionNumber } = props.versionInfo;
            // 针对编辑情况
            if (versionNumber) {
                const arr = versionNumber.split('.');
                if (arr.length) {
                    arr.forEach((item, index) => {
                        state.form[`num${index + 1}`] = item;
                    });
                }
            } else {
                state.form.num1 = null;
                state.form.num2 = null;
                state.form.num3 = null;
                state.form.num4 = null;
            }
        };
        init();
        return {
            ruleFormRef,
            ...toRefs(state),
            rules,
            versionNumber,
            validate
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.version-number1-form-item) {
    .ant-form-item-explain-error {
        display: block !important;
    }
}
</style>